<template>
  <div class="listCourse">
    <div class="list_title">课程列表</div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in arr" :key="index">
        <div class="grid-content bg-purple">
          <div class="top">
            <div class="id">ID: {{ item.id }}</div>
            <input
              type="checkbox"
              @change="checkSingle()"
              :value="item.id"
              v-model="checkArr"
            />
          </div>
          <div class="pic">
            <img src="../../../assets/images/course/kecheng-picture01.png" />
            <div class="type"></div>
            <span>
              <template>{{ typeObj[item.type] }}</template>
            </span>
          </div>
          <div class="title">{{ item.title }}</div>
          <p class="fee">报名费：¥ {{ item.fee }}</p>
          <p class="sale">销量：{{ item.sale }}</p>
          <p class="person">上传人：{{ item.person }}</p>
          <p class="time">上传时间：{{ item.date }}</p>
          <div class="btns">
            <el-button type="primary" @click="handleEdit(item)" size="small">
              <i class="el-icon-edit"></i> 编辑
            </el-button>
            <el-button type="info" @click="handleDelete(item.id)" size="small">
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-empty
      description="暂无数据"
      v-if="arr.length ? false : true"
    ></el-empty>
    <div class="delete">
      <label
        ><input
          type="checkbox"
          @click="checkAll(arr)"
          v-model="checked"
        />全选</label
      >
      <span @click="batchDelete">批量删除</span>
    </div>
  </div>
</template>

<script>
import { deleteById, batchDelete } from "../../../api/course";
export default {
  props: ["arr", "total"],
  data() {
    return {
      isShow: false,
      checked: false,
      checkArr: [],
      typeObj: {
        0: "上架",
        1: "下架",
      },
    };
  },
  methods: {
    // 删除单条数据
    handleDelete(id) {
      deleteById({ id: id }).then((res) => {
        if (res.code == 200) {
          this.$emit("resetparentFun");
        }
      });
    },

    // 全选
    checkSingle() {
      if (this.checkArr.length === 8) {
        this.checked = true;
      }
      if (this.checkArr.length !== 8) {
        this.checked = false;
      }
    },
    checkAll(arr) {
      if (!this.checked) {
        let newArr = [];
        arr.forEach((item) => {
          newArr.push(item.id);
        });
        this.checkArr = newArr;
      } else {
        this.checkArr = [];
      }
    },

    // 批量删除
    batchDelete() {
      let ids = "";
      if (this.checkArr.length > 0) {
        this.checkArr.forEach((item) => {
          ids += item + ",";
        });
        ids = ids.slice(0, -1);
      }
      this.checked = false; // 重置全选按钮状态
      batchDelete({ ids: ids }).then((res) => {
        if (res.code == 200) {
          this.$emit("resetparentFun");
        }
      });
    },

    // 修改数据
    handleEdit(row) {
      this.$emit("openDialog", row);
    },
  },
};
</script>

<style lang="less" scoped>
.listCourse {
  font-family: "微软雅黑";
  text-align: left;
  min-width: 1205px;
  max-width: 1365px;
  margin: 0 auto;

  .list_title {
    padding-left: 30px;
    margin-top: 21px;
    font-size: 16px;
    font-weight: bold;
  }

  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
    .el-col {
      position: relative;
      margin-top: 20px;

      .bg-purple {
        background: #fff;
        .top {
          line-height: 28px;
          display: flex;
          justify-content: space-between;

          .id {
            font-size: 12px;
            font-weight: bold;
          }

          input {
            z-index: 2;
            margin-top: 6px;
            cursor: pointer;
          }
        }
        .pic {
          margin-bottom: 10px;
          position: relative;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }

          .type {
            position: absolute;
            top: -33px;
            right: -33px;
            width: 60px;
            height: 60px;
            background: red;
            transform: rotate(45deg);
          }
          span {
            position: absolute;
            top: 5px;
            right: 0;
            color: white;
            font-size: 12px;
            transform: rotate(45deg);
          }
        }
        .title {
          font-size: 14px;
          font-weight: bold;
          letter-spacing: 100;
        }

        p {
          margin-top: 12px;
          font-size: 14px;
        }
        .btns {
          margin-top: 18px;
          margin-bottom: 4px;
          display: flex;
          justify-content: space-evenly;

          .el-button--small,
          .el-button--small.is-round {
            width: 68px;
            height: 24px;
            padding: 0;
          }
        }
      }
    }
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .grid-content {
    padding: 0 12px 8px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  // 删除按钮
  .delete {
    margin-top: 14px;
    text-align: left;
    .allBtn {
      margin-top: 14px;
      color: #333;
      font-size: 16px !important;
    }

    /deep/label {
      margin-left: 2px;
      margin-right: 4px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
    }

    span {
      font-size: 12px;
      cursor: pointer;
    }
  }

  // 空状态
  .empty {
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #99a9bf;
    font-size: 20px;
  }
}
</style>